import Vue from 'vue'
import Vuex from 'vuex'
// 按需导入 API 接口
import { getUserInfoAPI, getUserProfileAPI } from '@/api/userAPI.js'

Vue.use(Vuex)

// 1. 定义一个初始的，不含任何数据的 state 对象
// 这个对象，只有结构，没有真正的数据
// 今后，要新增全局共享的数据，只需要挂载到 initstate 对象中即可
let initState = {
  // tokenInfo 对象的格式为 { token,refresh,token }
  tokenInfo: {
    token: '',
    refresh_token: ''
  },
  // 用户的基本信息
  userInfo: {},
  // 用户的简介
  userProfile: {}

}

// 从 localStorage 中读取本地的数据
const stateStr = localStorage.getItem('state')
// console.log(stateStr)
// 2. 判断 stateStr 是否为 null
if (stateStr !== null) {
  // 如果 stateStr 有值，则以 stateStr 的值为准
  initState = JSON.parse(stateStr)
}

export default new Vuex.Store({
  // state 的值会有两种情况：
  // 1. 它的值是从 localStorage 中读出来的
  // 2. localStorage 中没有值，那么 state 的值应该是初始值
  state: initState,
  mutations: {
    // 专门用来修改 tokenInfo 的方法
    // payload 的格式为{ token,refresh_token }
    /**
     * 在组建中调用 Mutation 方法有两种:
     * 1. this.$store.commit('方法名'，参数)
     * 2. ...mapMutation['方法名']
     */
    updatetokenInfo (state, payload) {
      state.tokenInfo = payload

      // 把修改过后的 state 数据源持久化存储到 localStorage
      localStorage.setItem('state', JSON.stringify(state))
    },
    // 更新用户的基本信息，性惨重的 payload 就是用户的信息对象
    updateUserInfo (state, payload) {
      state.userInfo = payload
      // 把修改过后的 state 数据源持久化存储到 localStorage
      localStorage.setItem('state', JSON.stringify(state))
    },
    // 清空 State 和本地的数据
    cleanState (state) {
      // 1.清空 state
      state.tokenInfo = {}
      state.userInfo = {}
      // 退出登录的时候，要清空用户的简介信息
      state.userProfile = {}
      // 2.
      localStorage.setItem('state', JSON.stringify(state))
      //
    },
    updateUserProfile (state, payload) {
      state.userProfile = payload
      localStorage.setItem('state', JSON.stringify(state))
    }
  },
  actions: {
    // 初始化用户的基本信息
    async initUserInfo (ctx) {
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        // console.log(res)
        ctx.commit('updateUserInfo', res.data)
      }
    },
    // 初始化用户简介信息
    async initUserProfile (ctx) {
      const { data: res } = await getUserProfileAPI()
      if (res.message === 'OK') {
        console.log(res.data)
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  getters: {
    avatar (state) {
      return state.userInfo.photo || 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  },
  modules: {
  }
})
